<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: 0 auto;
            width: 700px;
        }

        ul {
            list-style: none;
        }

        span {
            width: 150px;
            display: inline-block;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>水果列表清单</h1>
        <ul>
            <li>
                <span>名称</span>
                <span>数量</span>
                <span>单价</span>
                <span>操作</span>
            </li>
            <li v-for="(item,id) in fruits" :key="item.id">
                <span>{{item.fruitName}}</span>
                <span>{{item.fruitQuantity}}</span>
                <span>{{item.fruitPrice}}</span>
                <span>
                    <button @click="del(item.id)">删除</button>
                    <button @click="update(item)">修改</button>
                </span>
            </li>
        </ul>
        总计：{{total}}
        <p>水果名称：<input type="text" v-model="fruit.fruitName"></p>
        <p>水果数量：<input type="number" v-model="fruit.fruitQuantity"></p>
        <p>水果单价：<input type="number" v-model="fruit.fruitPrice"></p>
        <button @click="add">{{title[0]}}</button><span>{{show}}</span>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                fruits: [],
                fruit: {
                    fruitName: "",
                    fruitQuantity: "",
                    fruitPrice: ""
                },
                title: ["添加水果", "修改数据"],
                flag: -1,
                show: ""
            }
        },
        methods: {
            add: function () {
                var quantityReg=/^\d+$/
                var priceReg=/^\d+(\.\d{1,2})?$/
                if(this.fruit.fruitName==""||this.fruit.fruitQuantity==""||this.fruitPrice==""){
                    this.show="水果数据不能为空"
                    return false
                }
                if(!quantityReg.test(this.fruit.fruitQuantity)){
                    this.show="水果数量必须为整数"
                    return false
                }
                if(!priceReg.test(this.fruit.fruitPrice)){
                    this.show="水果单价必须是数值"
                    return false
                }
                if (this.fruit.id) {
                    //修改
                    axios.post('http://localhost:3000/updateFruit', { fruit: this.fruit })
                        .then(res => {
                            if (res.status == 200) {
                                this.showFruits()
                                this.title.reverse()
                                this.fruit = {}
                            }
                        })
                } else {
                    //插入
                    axios.post('http://localhost:3000/addFruit', { fruit: this.fruit })
                        .then(res => {
                            if (res.status == 200) {
                                this.showFruits()
                            }
                        })
                }
                this.fruit={}
            },
            del: function (id) {
                if (confirm("请确实是否要删除！"))
                    axios.post('http://localhost:3000/delFruit', { id })
                        .then(res => {
                            if (res.status === 200 && res.data.msg === "成功") {
                                //删除成功之后，调用显示水果的方法
                                this.showFruits()
                                //console.log(res.data)
                            }
                        })
            },
            update: function (item) {
                this.fruit = item
                this.title.reverse()
            },
            showFruits() {
                axios.post('http://localhost:3000/showFruits')
                    .then(res => {
                        if (res.status == 200) {
                            //console.log(res.data)
                            if (res.data.success) {
                                this.fruits = res.data.data
                            }
                        }
                    })
            }
        },
        computed: {
            total: function () {
                var sum = 0;
                for (var i in this.fruits) {
                    sum += this.fruits[i].fruitQuantity * this.fruits[i].fruitPrice
                }
                return sum
            }

        },
        watch: {
            show: function (newValue, oldValue) {
                console.log(`show原来的值是${oldValue},现在的值是${newValue}`)
            }
        },
        //获取数据
        mounted() {
            this.showFruits()
        }
    })

</script>